<template>
  <Modal
    v-model="showEditCrontabScheduleModal"
    title="编辑Crontab日程"
    :closable="false"
    :mask-closable="false"
    width="650"
  >
    <Form
      label-position="right"
      :label-width="160"
      ref="crontabScheduleForm"
      :model="crontabScheduleForm"
      :rules="crontabScheduleValidate"
    >
      <FormItem label="Minute(s)" prop="minute">
        <Input
          clearable
          placeholder='Cron Minutes to Run. Use "*" for "all". (Example: "0,30")'
          v-model="crontabScheduleForm.minute"
        />
      </FormItem>
      <FormItem label="Hour(s)" prop="hour">
        <Input
          clearable
          placeholder='Cron Hours to Run. Use "*" for "all". (Example: "8,20")'
          v-model="crontabScheduleForm.hour"
        />
      </FormItem>
      <FormItem label="Day(s) Of The Week" prop="day_of_week">
        <Input
          clearable
          placeholder='Cron Days Of The Week to Run. Use "*" for "all". (Example: "0,5")'
          v-model="crontabScheduleForm.day_of_week"
        />
      </FormItem>
      <FormItem label="Day(s) Of The Month" prop="day_of_month">
        <Input
          clearable
          placeholder='Cron Days Of The Month to Run. Use "*" for "all". (Example: "1,15")'
          v-model="crontabScheduleForm.day_of_month"
        />
      </FormItem>
      <FormItem label="Month(s) Of The Year" prop="month_of_year">
        <Input
          clearable
          placeholder='Cron Months Of The Year to Run. Use "*" for "all". (Example: "0,6")'
          v-model="crontabScheduleForm.month_of_year"
        />
      </FormItem>
    </Form>
    <div slot="footer">
      <Button type="default" @click="handleEditCrontabScheduleCancel"
        >取消</Button
      >
      <Button
        type="primary"
        @click="handleEditCrontabScheduleSubmit('crontabScheduleForm')"
        >确定</Button
      >
    </div>
  </Modal>
</template>

<script>
import { updateCrontabSchedule } from "@/api/CeleryScheduledTaskService/crontab-schedule";

export default {
  name: "crontab-schedule-edit",
  props: {
    editCrontabSchedule: {
      type: Boolean,
      default: false,
    },
    crontabSchedule: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  watch: {
    crontabSchedule(val) {
      if (this.showEditCrontabScheduleModal) {
        this.crontabScheduleForm = { ...val };
      }
    },
  },
  computed: {
    showEditCrontabScheduleModal: {
      get() {
        return this.editCrontabSchedule;
      },
      set(val) {
        this.$emit("update:editCrontabSchedule", val);
        this.$emit("update:crontabSchedule", {});
      },
    },
  },
  data() {
    return {
      crontabScheduleForm: {
        id: "",
        minute: "",
        hour: "",
        day_of_week: "",
        day_of_month: "",
        month_of_year: "",
      },
      crontabScheduleValidate: {
        minute: [
          { required: true, message: "该字段是必填项。", trigger: "blur" },
        ],
        hour: [
          { required: true, message: "该字段是必填项。", trigger: "blur" },
        ],
        day_of_week: [
          { required: true, message: "该字段是必填项。", trigger: "blur" },
        ],
        day_of_month: [
          { required: true, message: "该字段是必填项。", trigger: "blur" },
        ],
        month_of_year: [
          { required: true, message: "该字段是必填项。", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    handleEditCrontabScheduleCancel() {
      this.crontabScheduleForm = {
        id: "",
        minute: "",
        hour: "",
        day_of_week: "",
        day_of_month: "",
        month_of_year: "",
      };
      this.showEditCrontabScheduleModal = false;
      this.$refs['crontabScheduleForm'].resetFields();
    },

    handleEditCrontabScheduleSubmit(name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          updateCrontabSchedule(this.crontabScheduleForm)
            .then((res) => {
              if (res.status === 200) {
                this.$Message.info("修改成功");
                this.handleEditCrontabScheduleCancel();
                this.$emit("initCrontabScheduleTable");
              } else {
                this.$Message.error("修改失败");
              }
            })
            .catch((err) => {
              this.$Modal.error({
                title: "系统异常，请联系管理员……",
                content: JSON.stringify(err),
                closable: true,
              });
            });
        }
      });
    },
  },
};
</script>

<style scoped>
</style>
